<!--
 * @Author: Bennent_G
 * @Date: 2024-12-23 16:14:13
 * @LastEditTime: 2025-03-27 19:38:53
 * @Description: role module view
-->

<template>
	<!-- search -->
	<el-card class="mb-16">
		<el-collapse v-model="activeKey" class="page-header-container">
			<el-collapse-item title="搜索" name="1">
				<el-form :inline="true" :model="searchForm">
					<el-form-item label="昵称">
						<el-input v-model="searchForm.nickName" placeholder="请输入" />
					</el-form-item>
					<el-form-item label="手机号">
						<el-input v-model="searchForm.mobile" placeholder="请输入" />
					</el-form-item>
					<el-form-item label="性别">
						<el-select v-model="searchForm.sex">
							<el-option label="全部" value='-1' />
							<el-option label="男" value="1" />
							<el-option label="女" value="0" />
						</el-select>
					</el-form-item>
					<el-form-item label="状态">
						<el-select v-model="searchForm.status" @change="aaa">
							<el-option label="全部" value='-1' />
							<el-option label="正常" value="1" />
							<el-option label="禁用" value="2" />
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" size="small">搜索</el-button>
					</el-form-item>
				</el-form>
			</el-collapse-item>
		</el-collapse>
	</el-card>
	<el-card>
		<template #header>
			<el-space>
				<el-button type="primary" size="small" @click="openModal('add')">创建角色</el-button>
			</el-space>
		</template>
		<el-table :data="data" border style="width: 100%">
			<el-table-column prop="id" label="ID" align="center" />
			<el-table-column prop="nickName" label="角色名称" align="center" />
			<el-table-column prop="desc" label="角色描述" align="center" />
			<el-table-column prop="remark" label="remark" align="center" />
			<el-table-column prop="createTime" label="注册时间" align="center" width="180" />
			<el-table-column label="状态" align="center">
				<template #default="scope">
					<el-tag v-if="scope.row.status === '1'" type="primary" size="small">正常</el-tag>
					<el-tag v-else type="danger" size="small">禁用</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="操作" align="center" fixed="right" width="200">
				<template #default="scope">
					<el-space :size="6">
						<el-button type="warning" text size="small" @click="openDrawer(scope.row.id)">授权</el-button>
						<el-button text size="small" @click="openModal('edit', scope.row.id)">编辑</el-button>
						<el-button type="danger" size="small" text
							@click="handleDelete(scope.row, scope.$index)">删除</el-button>
					</el-space>
				</template>
			</el-table-column>
		</el-table>
	</el-card>
	<!-- 角色表单弹窗 -->
	<RoleFormModal v-model="visible" :title="title" :id="currentUserId" />
	<!-- drawer -->
	<RoleDrawer v-model="drawerVisible" :id="drawerRoleId" />
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import useNotificationHook from '@/hooks/common/useNotificationHook';
import type { AnyObject } from '@/views/global';
import { fetchRoles } from '@/apis/admin/user';
import RoleFormModal from "@/components/admin/systems/role/RoleFormModal.vue";
import RoleDrawer from '@/components/admin/systems/role/RoleDrawer.vue';

interface Role {
	id: number;
	nickName: string;
	desc: string;
	remark: string;
	createTime: string;
	status: string;
}
const data = ref<Role[]>();
const getRoles = () => {
	fetchRoles<Role[]>({}).then((res) => {
		data.value = res.data;
	});
};
onMounted(() => {
	getRoles();
});

// search
const activeKey = ref<string[]>(['1']);
const searchForm = reactive({
	nickName: '1111',
	mobile: '',
	sex: '-1',
	status: '-1',
});
const aaa = (value: string) => {
	console.log('aaa', value === undefined);
}
// 通知
const { openNotifation } = useNotificationHook();

// 状态切换
// const handleStatus = (checked: string | number, record: AnyObject) => {
// 	Modal.confirm({
// 		title: "提示",
// 		icon: createVNode(ExclamationCircleOutlined),
// 		content: `确认${checked === '1' ? '启用' : '禁用'}用户吗？`,
// 		okText: '确认',
// 		cancelText: '取消',
// 		onOk() {
// 			//  #TODO: API调用
// 			record.status = checked.toString();
// 		},
// 		onCancel() {
// 			record.status = !checked.toString();
// 		},
// 	});
// };

// 删除
const handleDelete = (record: AnyObject) => {
	console.log(record);
	// #TODO:  API调用
	openNotifation({
		type: 'success',
		message: '删除成功',
	});
};

// 弹框表单
const visible = ref<boolean>(false);
const title = ref<string>('');
const currentUserId = ref<number | string>(0);
const openModal = (type: string, id?: number | string | undefined) => {
	title.value = type === 'add' ? '新增角色' : '编辑角色';
	currentUserId.value = id || 0;
	visible.value = true;
};

// drawer
const drawerVisible = ref<boolean>(false);
const drawerRoleId = ref<number | string>(0);
const openDrawer = (id: number | string) => {
	drawerVisible.value = true;
	drawerRoleId.value = id;
};
</script>

<style scoped lang="scss">
@use '@/assets/style/mixin' as mixin;
@include mixin.reset-el-collapse;
@include mixin.reset-el-card;

.page-header-container {
	.el-form-item {
		width: 240px;
		margin-bottom: 16px;
	}
}
</style>
